<html>
<meta charset="utf-8">

<head>
    <script src="jquery-3.2.1.min.js"></script>
</head>
<div>
    <p>position 属性指定了元素的定位类型。</p>
    <pre>
            position 属性的四个值：
            static      html默认定位
            relative
            fixed
            absolute
    </pre>
    <h3>fixed定位：元素相对于浏览器是固定的，窗口就算是滚动的，元素也不会移动(例如导航栏)</h3>
    <span style="position:fixed; right:10px;top:30px">导航</span>
    <p>注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持. Fixed定位使元素的位置与文档流无关，因此不占据空间。 Fixed定位的元素和其他元素重叠</p>
    <h3>relative 是相对其正常位置的移动 （但是他原位置站位不变）</h3>
    <span style="position:relative;top:-30px">relative定位</span>
    <h3>absolute 绝对定位  是相对于最近的已定位元素的移动 （原位置不站空间）</h3>
    <span style="position:absolute;left:500px;top:10px;">absolute 绝对定位 </span>
</div>

</html>